﻿<!DOCTYPE html>
<!-- 
| - - Motion.Euzo.Ca - - - Motion and M+ from euzo.ca - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
-->
<html>
<head>
    <title>Test the Motion Tabs Control</title>
    <!-- 
    Style sheets. 
    -->
    <link href="../Motion/User Interface/Framework/Tabs/tabs.css" rel="stylesheet" type="text/css" />
    <link href="../Motion/User Interface/Fonts/Fonts.css" rel="stylesheet" type="text/css" />
    <!--  
    Application scripts.    
    -->
    <script src="../Motion/User Interface/Framework/Document.js" type="text/javascript"></script>
    <script type="text/ecmascript">
        if (!document.IsGoogleChrome())
        {
            alert('This is not Google Chrome, the page may not work correctly.')
        }
    </script>
    <script src="../Motion/User Interface/Framework/Tabs/tabs.js" type="text/javascript"></script>
</head>
<body>
    <tabs location="left" style="width: 80px; height: 400px; position: absolute; top: 80px; left: 30px">     
        <container>  
            <tab header="Page 1">Page 1</tab>
            <tab header="Page 2">Page 2</tab>
            <tab header="Page 2">Page 3</tab>       
        </container>
    </tabs>
    <tabs location="top" style="width: 400px; height: 50px; position: absolute; top: 20px; left: 130px">
        <container>
            <tab header="Page 1">Page 1</tab>
            <tab header="Page 2">Page 2</tab>
            <tab header="Page 2">Page 3</tab>
        </container>
    </tabs>
    <tabs location="right" style="width: 80px; height: 400px; position: absolute; top: 80px; left: 550px">
        <container>
            <tab header="Page 1">Page 1</tab>
            <tab header="Page 2">Page 2</tab>
            <tab header="Page 2">Page 3</tab>
        </container>
    </tabs>
    <tabs location="bottom" style="width: 400px; height: 50px; position: absolute; top: 500px; left: 130px">
        <container>
            <tab header="Page 1">Page 1</tab>
            <tab header="Page 2">Page 2</tab>
            <tab header="Page 2">Page 3</tab>
        </container>
    </tabs>
    <p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Some
        text, Some text, Some text, Some text</p>
</body>
</html>
